<template>
	<view class="container">
		<view class="header" :style="{ backgroundImage: 'url(' + IMG_URL + Background + ')' }">
			<view class="dis-flex flex-y-center">
				<image class="imgicon" src="/static/imgs/fenlei.png" mode="widthFix" @click="() => show = true" />
				<view class="book flex-box">官宣书</view>
				<view class="dis-flex flex-y-center">
					<!-- <u-upload :fileList="fileList" name="files" @afterRead="afterRead"> -->
					<view class="upload" @tap="backShow=true">上传背景</view>
					<!-- </u-upload> -->
					<image class="imgicon2" src="/static/imgs/fx.png" mode="widthFix" @click="() => isShare = true" />
				</view>
			</view>
			<view class="official">官宣日期</view>
			<view class="officialTime">{{ formattedLovetime(relationship.lovetime) }}</view>
			<view class="dis-flex flex-x-center flex-y-center boxWrap">
				<image class="avatar" v-if="user.avatar" :src="IMG_URL + user.avatar" style="border-radius: 50%;" />
				<image class="avatar" v-else src="/static/imgs/tou.png" />
				<view class="nameWrap">
					<view class="name" v-if="zhenshi">{{ user.username }}</view>
					<view class="name" v-else>{{ user.name }}</view>
					<view class="ids">ID：{{ user.I_D }}</view>
				</view>
			</view>
			<view class="dis-flex flex-x-center flex-y-center boxWrap">
				<image class="avatar" v-if="ship.avatar" :src="IMG_URL + ship.avatar" style="border-radius: 50%;" />
				<image class="avatar" v-else src="/static/imgs/gx_add.png" @click="toJump('/pages/index/binding')" />
				<view class="nameWrap">
					<view class="name" v-if="zhenshi">{{ ship.username || "未绑定" }} </view>
					<view class="name" v-else>{{ ship.name }}</view>
					<view class="ids">ID：{{ ship.I_D }}</view>
				</view>
			</view>

			<view class="dis-flex flex-x-center flex-y-center boxLine">
				<view class="line"></view>
				<view class="nameWrap">
					<view class="days">在一起的天数</view>
					<view class="" style="display: flex;align-items: center;margin-top: 20rpx">
						<view class="nums">{{ day }}</view>
						<image src="../../static/imgs/loveagree.png" alt=""
							@click="toJump('/pages/love/coupleAgree?ship='+JSON.stringify(relationship))"
							mode="heightFix" style="height: 50rpx;margin-left: 10rpx;">
						</image>
					</view>

				</view>
			</view>

			<view class="dis-flex flex-x-between flex-y-center boxDot">
				<view class="dis-flex flex-x-between flex-y-center" @click="switchName()">
					<view class="dot"></view>
					<!-- <view class="txts">（昵称和真实姓名显示切换开关）</view> -->
				</view>

				<view class="txts" v-if="relationship.registration_number">官宣书登记字号：{{ relationship.registration_number
					}}
				</view>
			</view>
		</view>

		<view class="notice_box">
			<view class="register_txt tac">
				<u-tabs :list="tabs" lineColor="#252525" :activeStyle="activeStyle" :current="current"
					@click="tabClick"></u-tabs>
			</view>
			<view class="u-content">
				<WaterFall :list="list" :type="type" v-if="waterFall" :userid="ship.id"></WaterFall>
			</view>
		</view>
		<!-- 左侧弹窗 -->
		<u-popup :show="show" mode="left" @close="() => show = false">
			<view class="menus">
				<view class="items" v-for="item in menus" @click="Anoath(item.id)" :key="item.id">{{ item.name }}</view>
			</view>
		</u-popup>
		<Publish :show='isPublish' @changeClose="() => isPublish = false"></Publish>
		<!-- <view style="position: fixed; bottom: 0; left: 0; right: 0;"> -->
		<Tabbar path="/pages/index/index"></Tabbar>
		<!-- </view> -->
		<Share ref="addressWindow" :address='isShare' @changeClose="() => isShare = false" v-if="isShare"
			:article="article" :zhuye="false">
		</Share>
		<u-action-sheet :actions="backList" title="上传背景图" :show="backShow" :closeOnClickOverlay="true"
			@close="backShow=false" @select="backSelect"></u-action-sheet>
	</view>
</template>
<script>
	import {
		myLove
	} from '../../api/love.js'
	
	import env from '@/utlis/env.js';
	import WaterFall from '@/components/waterfall/waterfall'
	import Publish from '@/components/publish'
	import {
		uploadImage
	} from "../../api/common.js"

	import {
		mapGetters
	} from "vuex";
	import {
		IMG_URL,
	} from "../../config/app.js";
	import st from "../../utlis/showtoast.js";
	import Share from '@/components/share'
	export default {
		components: {
			WaterFall,
			Publish,
			Share
		},
		data() {
			return {
				IMG_URL: IMG_URL,
				isShare: false,
				waterFall: true,
				zhenshi: true,
				fileList: [],
				show: false,
				current: 0,
				isPublish: false,
				tabs: [{
					name: '情侣日记'
				}, {
					name: '闺蜜日记'
				}],
				list: [],
				backShow: false,
				backList: [{
						name: '从相册中选择',
						fontSize: '20',
						value: 1
					},
					{
						name: '还原',
						fontSize: '20',
						value: 2
					},
				],
				menus: [{
						name: '官宣书指南',
						id: 9
					},

					// {
					// 	name: '宣文介绍',
					// 	id: 2
					// }, {
					// 	name: '分享版介绍',
					// 	id: 3
					// }, {
					// 	name: '永久版介绍',
					// 	id: 4
					// }, {
					// 	name: '誓言版介绍',
					// 	id: 5
					// }, {
					// 	name: '时间锁介绍',
					// 	id: 6
					// }, 
					{
						name: '关于我们',
						id: 7
					}, {
						name: '合作联系',
						id: 8
					}
				],
				user: {},
				ship: {},
				day: 0,
				relationship: {},
				activeStyle: {
					color: '#252525'
				},
				type: 4,
				Background: ''
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		computed: {
			...mapGetters({
				page_update_notice: "page_update_notice",
			}),

		},
		created() {
			
		},
		mounted() {
			
		},
		onShow() {
			this.waterFall = true
			this.love()
			this.Background = uni.getStorageSync('backgroundImageUrl');
			console.log('获取背景图',this.Background);
		},
		onHide() {
			this.waterFall = false
		},
		watch: {
			page_update_notice() {
				this.isPublish = true
			}
		},
		methods: {
			backSelect(e) {
				let that = this
				if (e.value == 1) {
					console.log('从相册中选择');
					uni.chooseImage({
						count: 1, // 最多可以选择的图片张数，默认9
						sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
						success: function(res) {
							let data = JSON.stringify(res.tempFilePaths)
							let dataArray = JSON.parse(data);
							that.afterRead(dataArray[0])
						}
					});

				} else if (e.value == 2) {
					console.log('还原');
					this.Background = ''
					uni.setStorageSync('backgroundImageUrl','')
				}
			},
			Anoath(id) {
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=binding"
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=announcement"
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=share"
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=permanent"
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=oath"
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=time"
					})
				} else if (id == 7) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=my"
					})
				} else if (id == 8) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=cooperation"
					})
				} else if (id == 9) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=guide"
					})
				}
			},
			// 上传背景图
			async afterRead(e) {
				const res = await uploadImage(e)
				this.Background = res.data.url
				uni.setStorageSync('backgroundImageUrl', res.data.url);
			},
			formattedLovetime(lovetime) {
				// 如果时间戳不存在，则使用当前时间戳
				const lovetimeTimestamp = lovetime || Math.floor(Date.now() / 1000);

				// 将时间戳转换为日期对象
				const lovetimeDate = new Date(lovetimeTimestamp * 1000);

				// 获取年月日
				const year = lovetimeDate.getFullYear();
				const month = ('0' + (lovetimeDate.getMonth() + 1)).slice(-2);
				const day = ('0' + lovetimeDate.getDate()).slice(-2);

				// 构建年月日字符串
				return `${year}年${month}月${day}日`;
			},
			switchName() {
				if (this.zhenshi) {
					this.zhenshi = false
				} else {
					this.zhenshi = true
				}

			},
			toJump(url) {
				if (!url) return
				uni.navigateTo({
					url
				});
			},

			tabClick(e) {
				console.log('切换宣文', e);
				this.current = e.index
				if (e.index == 0) {
					this.type = 4
				}
				if (e.index == 1) {
					this.type = 5
				}
			},
			// 获取详情数据
			async love() {
				const res = await myLove({
					'type': 1
				}).then(res => {
					console.log(res, '我的情侣');
					this.user = res.data.user
					this.ship = res.data.ship
					this.day = res.data.day
					this.relationship = res.data.relationship
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background: #fff;

		.header {
			background: #F6F6F6;
			height: 860rpx;
			padding: 52rpx 30rpx 45rpx;
			padding-top: 88rpx;

			background-size: cover;

			.imgicon {
				width: 36rpx;
			}

			.book {
				font-weight: bold;
				font-size: 34rpx;
				color: $uni-text-color;
				margin-left: 20rpx;
			}

			.upload {
				width: 138rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				border-radius: 21rpx;
				border: 1px solid $uni-border-color;
				font-size: 24rpx;
				color: $uni-text-color-placeholder;
				margin-right: 20rpx;
			}

			.imgicon2 {
				width: 40rpx;
			}

			.official {
				font-weight: bold;
				font-size: 34rpx;
				color: $uni-text-color;
				text-align: center;
				margin: 30rpx auto;
			}

			.officialTime {
				font-weight: bold;
				font-size: 60rpx;
				color: $uni-text-color;
				text-align: center;
				margin-bottom: 12rpx;
			}

			.boxWrap {
				margin-bottom: 38rpx;

				.avatar {
					width: 110rpx;
					//flex-shrink: 0;
					height: 110rpx;
				}

				.nameWrap {
					margin-left: 35rpx;

					.name {
						font-weight: 800;
						font-size: 32rpx;
						color: $uni-text-color;
						margin-bottom: 20rpx;
					}

					.ids {
						min-width: 200rpx;
						font-size: 30rpx;
						color: $uni-text-color-primary;
					}
				}
			}

			.boxLine {
				margin-bottom: 32rpx;

				.line {
					width: 4rpx;
					height: 98rpx;
					background: $uni-text-color;
				}

				.nameWrap {
					margin-left: 40rpx;

					.days {
						font-size: 30rpx;
						color: $uni-text-color-primary;
					}

					.nums {
						font-weight: bold;
						font-size: 48rpx;
						color: $uni-text-color;
					}
				}
			}

			.boxDot {
				.dot {
					width: 30rpx;
					height: 30rpx;
					background: $uni-text-color-primary;
					box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.6);
					border-radius: 50%;
				}

				.txts {
					font-size: 22rpx;
					color: $uni-text-color;
				}
			}
		}

		.notice_box {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 30rpx 0rpx rgba(202, 202, 202, 0.6);
			border-radius: 50rpx 50rpx 0 0;
			margin: -30rpx auto 0;
			padding: 34rpx 10rpx;
			min-height: 1000rpx;

			.register_txt {
				/deep/.u-tabs__wrapper__nav__item {
					flex: 1;
				}
			}
		}

		.menus {
			padding: 60rpx 100rpx 30rpx;

			.items {
				font-size: 30rpx;
				color: $uni-text-color;
				line-height: 90rpx;
			}
		}
	}

	.gxz {
		width: 68rpx;
		height: 88rpx;
		line-height: 42rpx;
		text-align: center;
		background: $uni-text-color;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
		margin-left: 12rpx;
	}
</style>